<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>数据分析</title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <link rel="stylesheet" th:href="@{/component/pear/css/pear.css}"/>
    <link rel="stylesheet" th:href="@{/admin/css/other/console2.css}"/>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md8">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        快捷菜单
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                <div class="pear-card" data-id="home1" data-title="主页" data-url="http://www.baidu.com">
                                    <i class="layui-icon layui-icon-home"></i>
                                </div>
                                <span class="pear-card-title">主页</span>
                            </div>
                            <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                <div class="pear-card" data-id="home2" data-title="弹层" data-url="http://www.baidu.com">
                                    <i class="layui-icon layui-icon-camera"></i>
                                </div>
                                <span class="pear-card-title">弹层</span>
                            </div>
                            <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                <div class="pear-card" data-id="home2" data-title="聊天" data-url="http://www.baidu.com">
                                    <i class="layui-icon layui-icon-star"></i>
                                </div>
                                <span class="pear-card-title">聊天</span>
                            </div>
                            <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                <div class="pear-card" data-id="home3" data-title="相机" data-url="http://www.baidu.com">
                                    <i class="layui-icon layui-icon-camera"></i>
                                </div>
                                <span class="pear-card-title">相机</span>
                            </div>
                            <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                <div class="pear-card" data-id="home4" data-title="表单" data-url="http://www.baidu.com">
                                    <i class="layui-icon layui-icon-console"></i>
                                </div>
                                <span class="pear-card-title">表单</span>
                            </div>
                            <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                <div class="pear-card" data-id="home5" data-title="安全" data-url="http://www.baidu.com">
                                    <i class="layui-icon layui-icon-auz"></i>
                                </div>
                                <span class="pear-card-title">安全</span>
                            </div>
                            <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                <div class="pear-card" data-id="home6" data-title="公告" data-url="http://www.baidu.com">
                                    <i class="layui-icon layui-icon-cart"></i>
                                </div>
                                <span class="pear-card-title">公告</span>
                            </div>
                            <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                <div class="pear-card" data-id="home7" data-title="更多" data-url="http://www.baidu.com">
                                    <i class="layui-icon layui-icon-app"></i>
                                </div>
                                <span class="pear-card-title">更多</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        代办任务
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">待审评论</div>
                                    <div class="count pear-text">21</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">待审帖子</div>
                                    <div class="count pear-text">32</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">待审文章</div>
                                    <div class="count pear-text">14</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">待审用户</div>
                                    <div class="count pear-text">63</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <div id="echarts-records" style="background-color:#ffffff;min-height:400px;"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">
                        使用记录
                    </div>
                    <div class="layui-card-body">
                        <table id="role-table" lay-filter="role-table"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">留言板</div>
            <div class="layui-card-body">
                <ul class="pear-card-status">
                    <li>
                        <p>要不要作为我的家人，搬来我家。</p>
                        <span>12月25日 19:92</span>
                        <a class="pear-btn pear-btn-primary pear-btn-xs pear-reply" data-id="1"
                           href="javascript:;">回复</a>
                    </li>
                    <li>
                        <p>快乐的时候不敢尽兴，频繁警戒自己保持清醒。</p>
                        <span>4月30日 22:43</span>
                        <a class="pear-btn pear-btn-primary pear-btn-xs pear-reply" data-id="1"
                           href="javascript:;">回复</a>
                    </li>
                    <li>
                        <p>夏天真的来了，尽管它还有些犹豫。</p>
                        <span>4月30日 22:43</span>
                        <a class="pear-btn pear-btn-primary pear-btn-xs pear-reply" data-id="1"
                           href="javascript:;">回复</a>
                    </li>
                    <li>
                        <p>看似不可达到的高度，只要坚持不懈就可能到达。</p>
                        <span>4月30日 22:43</span>
                        <a class="pear-btn pear-btn-primary pear-btn-xs pear-reply" data-id="1"
                           href="javascript:;">回复</a>
                    </li>
                    <li>
                        <p>当浑浊变成了一种常态，那么清白就成了一种罪过。</p>
                        <span>4月30日 22:43</span>
                        <a class="pear-btn pear-btn-primary pear-btn-xs pear-reply" data-id="1"
                           href="javascript:;">回复</a>
                    </li>
                    <li>
                        <p>那是一种内在的东西，他们到达不了，也无法触及！</p>
                        <span>5月12日 01:25</span>
                        <a class="pear-btn pear-btn-primary pear-btn-xs pear-reply" data-id="1"
                           href="javascript:;">回复</a>
                    </li>
                    </li>
                    <li>
                        <p>希望是一个好东西,也许是最好的,好东西是不会消亡的！</p>
                        <span>6月11日 15:33</span>
                        <a class="pear-btn pear-btn-primary pear-btn-xs pear-reply" data-id="1"
                           href="javascript:;">回复</a>
                    </li>
                    <li>
                        <p>一切都在不可避免的走向庸俗。</p>
                        <span>2月09日 13:40</span>
                        <a class="pear-btn pear-btn-primary pear-btn-xs pear-reply" data-id="1"
                           href="javascript:;">回复</a>
                    </li>
                    <li>
                        <p>路上没有灯火的时候，就点亮自己的头颅。</p>
                        <span>3月11日 12:30</span>
                        <a class="pear-btn pear-btn-primary pear-btn-xs pear-reply" data-id="1"
                           href="javascript:;">回复</a>
                    </li>

                    <li>
                        <p>我们应该不虚度一生，应该能够说：＂我已经做了我能做的事。＂</p>
                        <span>4月30日 22:43</span>
                        <a class="pear-btn pear-btn-primary pear-btn-xs pear-reply" data-id="1"
                           href="javascript:;">回复</a>
                    </li>
                    </li>
                    <li>
                        <p>接近，是我对一切的态度，是我对一切态度的距离</p>
                        <span>6月11日 15:33</span>
                        <a class="pear-btn pear-btn-primary pear-btn-xs pear-reply" data-id="1"
                           href="javascript:;">回复</a>
                    </li>
                    <li>
                        <p>没有锚的船当然也可以航行，只是紧张充满你的一生。</p>
                        <span>2月09日 13:40</span>
                        <a class="pear-btn pear-btn-primary pear-btn-xs pear-reply" data-id="1"
                           href="javascript:;">回复</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!--</div>-->
<script th:src="@{/component/layui/layui.js}"></script>
<script th:src="@{/component/pear/pear.js}"></script>
<script>
    layui.use(['layer', 'echarts', 'carousel', 'element', 'table'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            element = layui.element,
            echarts = layui.echarts,
            table = layui.table,
            carousel = layui.carousel;

        let cols = [
            [{
                type: 'checkbox'
            },
                {
                    title: '角色名',
                    field: 'roleName',
                    align: 'center',
                    width: 100
                },
                {
                    title: 'Key值',
                    field: 'roleCode',
                    align: 'center'
                },
                {
                    title: '描述',
                    field: 'details',
                    align: 'center'
                },
                {
                    title: '是否可用',
                    field: 'enable',
                    align: 'center',
                    templet: '#role-enable'
                }
            ]
        ]

        table.render({
            elem: '#role-table',
            url: '../../admin/data/role.json',
            page: true,
            cols: cols,
            skin: 'line'
        });


        var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

        $("body").on("click", "[data-url]", function () {
            parent.layui.tab.addTabOnlyByElem("content", {
                id: $(this).attr("data-id"),
                title: $(this).attr("data-title"),
                url: $(this).attr("data-url"),
                close: true
            })
        })


        let bgColor = "#fff";
        let color = [
            "#0090FF",
            "#36CE9E",
            "#FFC005",
            "#FF515A",
            "#8B5CFF",
            "#00CA69"
        ];
        let echartData = [{
            name: "1",
            value1: 100,
            value2: 233
        },
            {
                name: "2",
                value1: 138,
                value2: 233
            },
            {
                name: "3",
                value1: 350,
                value2: 200
            },
            {
                name: "4",
                value1: 173,
                value2: 180
            },
            {
                name: "5",
                value1: 180,
                value2: 199
            },
            {
                name: "6",
                value1: 150,
                value2: 233
            },
            {
                name: "7",
                value1: 180,
                value2: 210
            },
            {
                name: "8",
                value1: 230,
                value2: 180
            }
        ];

        let xAxisData = echartData.map(v => v.name);
        //  ["1", "2", "3", "4", "5", "6", "7", "8"]
        let yAxisData1 = echartData.map(v => v.value1);
        // [100, 138, 350, 173, 180, 150, 180, 230]
        let yAxisData2 = echartData.map(v => v.value2);
        // [233, 233, 200, 180, 199, 233, 210, 180]
        const hexToRgba = (hex, opacity) => {
            let rgbaColor = "";
            let reg = /^#[\da-f]{6}$/i;
            if (reg.test(hex)) {
                rgbaColor =
                    `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                        "0x" + hex.slice(3, 5)
                    )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
            }
            return rgbaColor;
        }

        option = {
            backgroundColor: bgColor,
            color: color,
            legend: {
                right: 10,
                top: 10
            },
            tooltip: {
                trigger: "axis",
                formatter: function (params) {
                    let html = '';
                    params.forEach(v => {
                        console.log(v)
                        html +=
                            `<div style="color: #666;font-size: 14px;line-height: 24px">
					                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
					                ${v.seriesName}.${v.name}
					                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
					                万元`;
                    })


                    return html
                },
                extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
                axisPointer: {
                    type: 'shadow',
                    shadowStyle: {
                        color: '#ffffff',
                        shadowColor: 'rgba(225,225,225,1)',
                        shadowBlur: 5
                    }
                }
            },
            grid: {
                top: 100,
                containLabel: true
            },
            xAxis: [{
                type: "category",
                boundaryGap: false,
                axisLabel: {
                    formatter: '{value}月',
                    textStyle: {
                        color: "#333"
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: "#D9D9D9"
                    }
                },
                data: xAxisData
            }],
            yAxis: [{
                type: "value",
                name: '单位：万千瓦时',
                axisLabel: {
                    textStyle: {
                        color: "#666"
                    }
                },
                nameTextStyle: {
                    color: "#666",
                    fontSize: 12,
                    lineHeight: 40
                },
                splitLine: {
                    lineStyle: {
                        type: "dashed",
                        color: "#E9E9E9"
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            }],
            series: [{
                name: "2018",
                type: "line",
                smooth: true,
                // showSymbol: false,/
                symbolSize: 8,
                zlevel: 3,
                lineStyle: {
                    normal: {
                        color: color[0],
                        shadowBlur: 3,
                        shadowColor: hexToRgba(color[0], 0.5),
                        shadowOffsetY: 8
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [{
                                offset: 0,
                                color: hexToRgba(color[0], 0.3)
                            },
                                {
                                    offset: 1,
                                    color: hexToRgba(color[0], 0.1)
                                }
                            ],
                            false
                        ),
                        shadowColor: hexToRgba(color[0], 0.1),
                        shadowBlur: 10
                    }
                },
                data: yAxisData1
            }, {
                name: "2019",
                type: "line",
                smooth: true,
                // showSymbol: false,
                symbolSize: 8,
                zlevel: 3,
                lineStyle: {
                    normal: {
                        color: color[1],
                        shadowBlur: 3,
                        shadowColor: hexToRgba(color[1], 0.5),
                        shadowOffsetY: 8
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [{
                                offset: 0,
                                color: hexToRgba(color[1], 0.3)
                            },
                                {
                                    offset: 1,
                                    color: hexToRgba(color[1], 0.1)
                                }
                            ],
                            false
                        ),
                        shadowColor: hexToRgba(color[1], 0.1),
                        shadowBlur: 10
                    }
                },
                data: yAxisData2
            }]
        };

        echartsRecords.setOption(option);

        window.onresize = function () {
            echartsRecords.resize();
        }

    });
</script>
</body>
</html>
